<template>
	<div>
		<el-dialog title="查看关联商家" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="1200px">
			<div class="form-box">
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
					
					<el-table-column prop="shopNo" label="店铺编号" width="120"></el-table-column>
					<el-table-column prop="shopName" label="店铺名称"></el-table-column>
					
					<el-table-column prop="shopType" label="店铺类型" width="120" align="center">
						<template slot-scope="scope">
							<el-tag type="warning" v-if="scope.row.shopType == 1">社区店铺</el-tag>
							<el-tag type="success" v-else-if="scope.row.shopType == 2">平台店铺</el-tag>
							<el-tag v-else>普通店铺</el-tag>
						</template>
					</el-table-column>
					
					<el-table-column prop="phone" label="联系电话" width="140"></el-table-column>
					<el-table-column prop="shopAddress" label="店铺地址" width="240"></el-table-column>
					
					<el-table-column prop="businessStatus" label="营业状态" width="150" align="center">
						<template slot-scope="scope">
							<el-tag type="success" v-if="scope.row.businessStatus == 1">营业中</el-tag>
							<el-tag type="info" v-if="scope.row.businessStatus == 2">暂停营业</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="businessBeginTime" label="营业时间" width="180" align="center">
						<template slot-scope="scope">
							<template v-if="scope.row.businessBeginTime && scope.row.businessEndTime">
								{{scope.row.businessBeginTime}}至{{scope.row.businessEndTime}}
							</template>
							<template v-else>-</template>
						</template>
					</el-table-column>
					
					<!-- <el-table-column fixed="right" label="操作" width="120">
						<template slot-scope="scope">
							<el-button type="primary" size="small" @click="viewDetail(scope.row)">查看详情</el-button>
						</template>
					</el-table-column> -->
				</el-table>
			</div>
			
			<div slot="footer">
				<el-button @click="close">关 闭</el-button>
			</div>
		</el-dialog>
		
		<merchant-detail-dialog
			:isShow="showDetailDialog"
			:item="currentItem"
			@close="closeDetailDialog"
		></merchant-detail-dialog>
	</div>
</template>

<script>
	import { getRelatedMerchants } from '@api/profitAllocation/profitAllocation'
	import merchantDetailDialog from './merchant-detail-dialog'
	import dayjs from 'dayjs'
	export default {
		components: {
			merchantDetailDialog,
		},
		props: {
			isShow: Boolean,
			item: Object,
		},
		data() {
			return {
				tableData: [],
				total: 0,
				page: 1,
				pageSize: 10,
				
				showDetailDialog: false,
				currentItem: {},
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					this.getData();
				}
			},
		},
		methods: {
			getData() {
				getRelatedMerchants({
					merchantId: this.item.id
				})
					.then(res => {
						this.tableData = res.data.relationAccountInfo;
					})
			},
			forDate(row, column) { //时间格式化
				if(column.property == 'createTime') {
					return row.createTime ? dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') : '';
				}
			},
			
			viewDetail(item) {
				this.currentItem = item;
				this.showDetailDialog = true;
			},
			closeDetailDialog() {
				this.showDetailDialog = false;
			},
			
			close() {
				this.$emit('close');
			},
		}
	}
</script>

<style>
</style>